import React, { useState, useEffect, useRef } from 'react';
import * as echarts from 'echarts';
import { resize } from '@/utils/resize';
import { getPeoplelist, getTourlist } from '@/api/getToutist';
import './index.css';
import { getOnlineList, getVistor } from '@/api/getToutist';

export default function MessageAll() {
  const echartsHtml = useRef<any>();
  const [num, setNum] = useState(200);
  const [list, setList] = useState([]);
  const [onlineList, setOnlineList] = useState([]);
  const [vistor, setVistor] = useState([]);

  useEffect(() => {
    let myChart = echarts.init(echartsHtml.current);
    var option = {
      title: {
        text: 'Stacked Line',
      },
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['Video Ads', 'Direct', 'Search Engine'],
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: 'Video Ads',
          type: 'line',
          stack: 'Total',
          smooth: true,
          data: [150, 232, 201, num, 190, 330, 410],
        },
        {
          name: 'Direct',
          type: 'line',
          stack: 'Total',
          smooth: true,
          data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
          name: 'Search Engine',
          type: 'line',
          stack: 'Total',
          smooth: true,
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        },
      ],
    };
    option && myChart.setOption(option);
    resize(myChart);
    return () => {
      myChart.dispose();
    };
  }, [num]);
  useEffect(() => {
    getPeoplelist({ aa: '11' }).then((res) => {
      setList(res.data.data);
    });

    getOnlineList().then((res) => {
      setOnlineList(res.data);
      console.log(res);
    });
    getVistor().then((res) => {
      setVistor(res.data);
    });
  }, []);

  return (
    <div className="boc">
      <div className="left">
        <div className="top">
          <h2>数据统计</h2>
          <div className="per">
            <div className="per-item">
              <p>客服总数</p>
              <p>{list.length}</p>
            </div>
            <div className="per-item">
              <p>当前在线客服总数</p>
              <p>{onlineList.length}</p>
            </div>
            <div className="per-item">
              <p>当前在线访客</p>
              <p>{vistor.length}</p>
            </div>
            <div className="per-item">
              <p>今日会话</p>
              <p>0</p>
            </div>
            <div className="per-item"></div>
          </div>
        </div>
        <div className="bot">
          <div
            id="main"
            ref={echartsHtml}
            style={{ width: '100%', height: '600px' }}
          ></div>
          <button
            onClick={() => {
              setNum(num + 50);
            }}
          >
            点击
          </button>
        </div>
      </div>
      <div className="right"></div>
    </div>
  );
}
